<template>
  <!-- 页面容器 -->
  <view class="user-info-page">
    <!-- 头部横幅 -->
    <view class="header-banner">
      <!-- 头像 -->
      <image class="avatar" src="/static/wdl/touxiang.png" mode="widthFix" />
      <!-- 欢迎语 + 登录按钮 -->
      <view class="welcome-wrap">
        <text class="welcome-text">HI~欢迎回来</text>
        <button class="login-btn" @click="gotoLoginPage">登录</button>
      </view>
    </view>

    <!-- 关注/话题统计 -->
    <view class="stats-bar">
      <view class="stat-item">
        <text class="stat-label">关注</text>
        <text class="stat-value">3</text>
      </view>
      <view class="divider"></view>
      <view class="stat-item">
        <text class="stat-label">话题</text>
        <text class="stat-value">0</text>
      </view>
    </view>

    <!-- 功能入口（收藏/历史/设置） -->
    <view class="func-entry">
      <view class="entry-item">
        <image class="entry-icon" src="/static/wdl/shoucang.png" />
        <text class="entry-text">收藏</text>
      </view>
      <view class="entry-item">
        <image class="entry-icon" src="/static/wdl/lishi.png" />
        <text class="entry-text">历史</text>
      </view>
      <view class="entry-item">
        <image class="entry-icon" src="/static/wdl/shezhi.png" />
        <text class="entry-text">设置</text>
      </view>
    </view>

    

    <!-- 发布引导 -->
    <view class="publish-guide">
      
      <text class="guide-desc">已有385,893人在这里发布身边的新鲜事</text>
      <button class="publish-btn">我也要发布</button>
      <text class="guide-link">先去逛逛 ></text>
    </view>

    <!-- 底部Tab栏 -->
    <view class="tab-bar">
      <view class="tab-item">
        <image src="/static/x1.png" />
        <text>新闻</text>
      </view>
      <view class="tab-item">
        <image src="/static/s1.png" />
        <text>视频</text>
      </view>
      <view class="tab-item">
        <image src="/static/h1.png" />
        <text>话题</text>
      </view>
      <view class="tab-item active">
        <image src="/static/w1.png" />
        <text>未登录</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    // 登录按钮点击事件
	gotoLoginPage(){
		uni.navigateTo({
			url:'/pages/Login/Login'
		});
	}
    }
};
</script>

<style scoped>
/* 页面基础样式 */
.user-info-page {
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
}

/* 头部横幅 */
.header-banner {
  width: 100%;
  height: 200rpx;
  background: linear-gradient(to right, #8a64ff, #5b3edb);
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  color: #fff;
}
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.welcome-wrap {
  display: flex;
  flex-direction: column;
  margin-bottom: 8rpx;
  
}
.welcome-text {
  font-size: 28rpx;
  margin-bottom: 10rpx;
}
.login-btn {
  background-color: #ff4545;
  color: #fff;
  border-radius: 20rpx;
  font-size: 24rpx;
  padding: 3rpx 10rpx;
  width: 100rpx;
  line-height: 60rpx;
}

/* 关注/话题统计 */
.stats-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15rpx 0;
  background-color: #f5f5f5;
}
.stat-item {
  text-align: center;
  flex: 1;
}
.stat-label {
  font-size: 24rpx;
  color: #666;
}
.stat-value {
  font-size: 28rpx;
  font-weight: bold;
}
.divider {
  width: 2rpx;
  height: 30rpx;
  background-color: #ccc;
}

/* 功能入口 */
.func-entry {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}
.entry-item {
  text-align: center;
}
.entry-icon {
  width: 40rpx;
  height: 40rpx;
  margin-bottom: 10rpx;
}
.entry-text {
  font-size: 24rpx;
  color: #666;
}

/* 广告横幅 */
.ad-banner {
  width: 100%;
  height: auto;
}

/* 发布引导 */
.publish-guide {
  padding: 30rpx 20rpx;
  text-align: center;
}
.guide-icons {
  display: flex;
  justify-content: center;
  gap: 20rpx;
  margin-bottom: 20rpx;
}
.guide-icons image {
  width: 60rpx;
  height: 60rpx;
}
.guide-desc {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 20rpx;
}
.publish-btn {
  background-color: #fff;
  border: 1rpx solid #e53935;
  color: #e53935;
  border-radius: 30rpx;
  padding: 10rpx 30rpx;
  margin-bottom: 15rpx;
}
.guide-link {
  font-size: 22rpx;
  color: #999;
}

/* 底部Tab栏 */
.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 80rpx;
  border-top: 1rpx solid #eee;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
}
.tab-item {
  text-align: center;
}
.tab-item image {
  width: 30rpx;
  height: 30rpx;
  margin-bottom: 5rpx;
}
.tab-item text {
  font-size: 22rpx;
  color: #666;
}
.tab-item.active text {
  color: #e53935;
}
</style>